<template>
  <div id="app">
    <div class="header">
    </div>
    <div class="main">
      <aside class="sidebar">
        <div class="menu-item">我的模型</div>
        <div class="menu-item">训练模型</div>
        <div class="menu-item">校验模型</div>
        <div class="menu-item">发布模型</div>
        <div class="menu-item">算法管理</div>
        <div class="menu-item">算法配置</div>
      </aside>
      <section class="content" v-if="!creatingModel">
        <div class="model-actions">
          <button class="create-model-btn" @click="createModel">创建模型</button>
          <select class="model-dropdown shorten move-right" v-model="selectedModelId" @change="onModelSelect">
      <option v-for="model in modelsList" :key="model.id" :value="model.id">
        {{ model.name }}
      </option>
    </select>
    <!-- 使用了额外的类："shorten" 和 "move-right" -->
    <input type="text" class="search-box shorten move-right" v-model="searchQuery" @input="onSearchQueryChange">
        </div>
        <table class="models-table">
          <thead>
            <tr>
              <th>模型名称</th>
              <th>部署方式</th>
              <th>版本</th>
              <th>部署状态</th>
              <th>训练状态</th>
              <th>模型效果</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="model in modelsList" :key="model.id">
              <td>{{ model.name }}</td>
              <td>{{ model.deploymentType }}</td>
              <td>{{ model.version }}</td>
              <td>{{ model.deploymentStatus }}</td>
              <td>{{ model.trainingStatus }}</td>
              <td>{{ model.performance }}</td>
              <td>
                <button @click="editModel(model.id)">编辑</button>
                <button @click="deleteModel(model.id)">删除</button>
              </td>
            </tr>
          </tbody>
        </table>
      </section>
      <section class="model-creation-panel" v-if="creatingModel">
        <button class="back-btn" @click="goBack">&#8592; 返回</button>
        <form @submit.prevent="submitForm">
          <div>
            <label for="modelType">模型类别:</label>
            <input type="text" id="modelType" v-model="newModel.type">
          </div>
          <div>
            <label for="modelName">模型名称:</label>
            <input type="text" id="modelName" v-model="newModel.name">
          </div>
          <div>
            <label for="industry">所属行业:</label>
            <select id="industry" v-model="newModel.industry">
              <!-- Options should be added here based on available industries -->
            </select>
          </div>
          <div>
            <label for="appScene">应用场景:</label>
            <select id="appScene" v-model="newModel.appScene">
              <!-- Options should be added here based on available application scenes -->
            </select>
            <textarea id="appSceneDesc" v-model="newModel.appSceneDesc"></textarea>
          </div>
          <button type="submit">创建完成</button>
          <button type="button" @click="goBack">取消</button>
        </form>
      </section>
    </div>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      creatingModel: false,
      newModel: {
        type: '',
        name: '',
        industry: '',
        appScene: '',
        appSceneDesc: ''
      },
      modelsList: [
        // Replace with your actual data fetching logic
        // Here's an example of what the data structure might look like
        {
          id: 1,
          name: 'My First Model',
          deploymentType: 'Cloud',
          version: 'v1.0',
          deploymentStatus: 'Deployed',
          trainingStatus: 'Completed',
          performance: '95%'
        }
        // ... more models ...
      ],
      // Other data like the models list would go here
    };
  },
  methods: {
    createModel() {
      this.creatingModel = true;
    },
    onModelSelect() {
      // 选中模型变更时所执行的代码
      console.log(`Selected model ID: ${this.selectedModelId}`);
      // 根据选中的模型 ID 执行一些操作，例如显示模型详情
    },
    onSearchQueryChange() {
      // 搜索词变更时所执行的代码
      console.log(`Search query: ${this.searchQuery}`);
      // 根据搜索词进行过滤操作或者执行其他逻辑
    },
    goBack() {
      this.creatingModel = false;
    },
    submitForm() {
      // Logic to add the new model to the model list
      // You need to define how to persist the list of models
      // For example, making an API call to save the new model
      this.goBack();
    },
    editModel(modelId) {
      console.log(`Editing model with ID: ${modelId}`);
    },
    deleteModel(modelId) {
      console.log(`Deleting model with ID: ${modelId}`);
      // 这里可以添加删除特定模型的代码
      // 例如：发起请求到后端服务去删除模型，并在前端列表中移除该模型
      this.modelsList = this.modelsList.filter(model => model.id !== modelId);
    },
  },
};
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
}


.logo {
  height: 50px;
  margin-right: 20px;
}

.nav-bar {
  border-bottom: 4px solid blue;
}

.nav-bar a {
  color: white;
  text-decoration: none;
  margin-right: 20px;
}

.main {
  display: flex;
}

.sidebar {
  width: 200px;
  background-color: #a0cfff;
  padding: 10px;
}

.menu-item {
  padding: 10px;
  border-bottom: 1px solid #eaeaea;
}

.content {
  flex-grow: 1;
  padding: 20px;
}

.model-actions {
  display: flex; /* 使用 flex 布局 */
  align-items: center; /* 垂直居中 */
  justify-content: space-between; /* 元素向右对齐 */
}


.create-model-btn {
  /* 按钮样式可根据需要定制 */
  margin-right: 10px; /* 和右边的元素之间的距离 */
}

/* 自定义的下拉框样式 */
.model-dropdown {
  height: 30px; /* 减小下拉框的高度 */
  border: 1px solid #ccc; /* 更细的边框 */
  font-size: 14px; /* 减小字体大小 */
  margin-right: 10px; /* 和右边的元素之间的距离 */
}

/* 自定义的搜索框样式 */
.search-box {
  height: 30px; /* 减小输入框的高度 */
  border: 1px solid #ccc; /* 更细的边框 */
  font-size: 14px; /* 减小字体大小 */
}
.model-actions .model-dropdown {
  margin-left: 20px; /* 或者根据您的设计需求调整 */
}

/* 如果您的下拉框有"shorten" 和 "move-right" 类，确保它们仍然生效 */
.model-actions .model-dropdown.shorten {
  width: 150px; /* 新的宽度 */
}

.model-actions .model-dropdown.move-right {
  margin-left: auto; /* 将元素向右移 */
}

/* 对搜索框的样式进行调整 */
.model-actions .search-box.shorten {
  width: 150px; /* 新的宽度 */
}

.model-actions .search-box.move-right {
  margin-left: auto; /* 将元素向右移 */
}

.models-table {
  width: 100%;
  border-collapse: collapse;
}

.models-table th,
.models-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.models-table th {
  background-color: #f5f5f5;
}

.model-creation-panel {
  background-color: white;
  padding: 20px;
}

.back-btn {
  display: block;
  margin-bottom: 10px;
}
.models-table {
  border-collapse: collapse;
  width: 100%;
  margin-top: 20px;
}

.models-table th, .models-table td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: left;
}

.models-table th {
  background-color: #f5f5f5;
}

button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 4px;
}

button:hover {
  opacity: 0.8;
}

/* Additional CSS for the form */
form div {
  margin-bottom: 10px;
}

label {
  display: block;
}

input[type="text"],
select,
textarea {
  width: 100%; /* 保持宽度为100% */
  padding: 12px 20px; /* 增加内边距以便更好的点击和阅读 */
  margin-top: 5px; /* 保持上边距 */
  border: 1px solid #ccc; /* 细边框仍然是好选择，但改为中间色 */
  border-radius: 5px; /* 添加轻微圆角 */
  box-sizing: border-box; /* 保证元素的总宽度不改变 */
  transition: border-color 0.3s; /* 平滑过渡边框颜色 */
}

input[type="text"]:focus,
select:focus,
textarea:focus {
  border-color: #4CAF50; /* 聚焦时有明显的颜色改变 */
  outline: none; /* 移除浏览器默认聚焦样式 */
}

.search-box {
  background-color: #f9f9f9; /* 更浅的背景色 */
  margin-right: 10px; /* 调整右边距，视情况而定 */
}

/* Overriding button styles for a cleaner look */
button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s, opacity 0.2s; /* 平滑背景颜色和透明度过渡 */
}

button:hover {
  background-color: #45a049;
  opacity: 0.9; /* 轻微减少透明度以提供反馈 */
}

/* Adjusting form layout and adding spacing */
form div {
  margin-bottom: 15px; /* 增加间距 */
}

label {
  font-weight: bold; /* 加粗标签文本 */
  margin-bottom: 5px; /* 在标签和输入框之间增加间距 */
}

/* Further enhancing the form's look */
form {
  background-color: #fff; /* Form background for isolation */
  padding: 20px;
  border-radius: 5px; /* Match other inputs */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* A subtle shadow for depth */
}

/* Ensure the back button matches the form styling */
.back-btn {
  background-color: #ccc; /* Visibly distinct color */
  padding: 8px 16px;
  border-radius: 5px; /* Match other buttons */
  border: none;
  margin-bottom: 20px; /* Add some space above the back button */
}

/* Style the submission buttons */
button[type="submit"] {
  background-color: #4CAF50;
}

button[type="button"] { /* cancel button in the form */
  background-color: #ff4436; /* a contrasting color */
}
.hidden-page {
  /* 基本属性可根据需要调整 */
  position: fixed; /* 或 absolute，取决于要相对于什么定位 */
  top: 50%;
  left: 50%;
  width: 80%; /* 或任何希望的宽度 */
  height: 70%; /* 或任何希望的高度 */
  transform: translate(-50%, -50%); /* 用于居中定位 */
  
  /* 布局和空间 */
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto; /* 如果内容很多，需要滚动 */
  
  /* 样式 */
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 给页面一个轻微的立体效果 */
  
  /* 过渡效果 */
  transition: all 0.3s ease-in-out;
  visibility: hidden; /* 默认不可见 */
  opacity: 0; /* 默认透明 */
  z-index: 1000; /* 确保在其他元素之上 */
}

/* 当页面应该显示出来时 */
.hidden-page.visible {
  /* 这里的 CSS 类名应该用 JavaScript 在合适的时机添加到 hidden-page 元素 */
  visibility: visible; 
  opacity: 1;
}
/* End of form CSS */
</style>